<template>
  <div class="wms flex">
    <!-- 侧边栏组件 -->
    <Aside></Aside>
    <div :class="store.state ? 'bodyw1' : 'bodyw'">
      <!-- 导航栏组件 -->
      <Nav></Nav>
      <div class="bodybox flex">
        <el-menu
          default-active="/wms"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :router="true"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="" @click="foldMenu">
            <el-icon><icon-menu /></el-icon>
            <template #title>折叠</template>
          </el-menu-item>
          <el-menu-item index="/wms/index">
            <el-icon><icon-menu /></el-icon>
            <template #title>index</template>
          </el-menu-item>
          <el-menu-item index="/wms/warehouse">
            <el-icon><icon-menu /></el-icon>
            <template #title>warehouse</template>
          </el-menu-item>

          <el-menu-item index="4">
            <el-icon><icon-menu /></el-icon>
            <template #title>Navigator Two</template>
          </el-menu-item>
        </el-menu>

        <div style="width: 100%">
          <router-view> </router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// 公共其他组件
import Aside from "../components/Aside.vue";
import Nav from "../components/Nav.vue";
// pinia
import { useDemoStore } from "../../pinia/index";
const store = useDemoStore();
const isCollapse = ref(false);
const foldMenu = () => {
  //折叠菜单
  isCollapse.value = !isCollapse.value;
};
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>
<style lang="less" scoped>
.wms {
  height: 100vh;
  box-sizing: border-box;
  background-color: #f1f1f1;
  overflow: hidden;
  .bodyw {
    width: 87.5%;
    transition: 0.3s ease;
  }
  .bodyw1 {
    width: 95%;
    transition: 0.3s ease;
  }
  .bodybox {
    box-sizing: border-box;
    height: 91vh;
    margin-top: 1vh;
    .el-menu-vertical-demo {
      height: 95vh;
    }
  }
}
</style>
